<template>
  <div>
    <el-link class="movie-poster"
             @click="getMovieDetail"
             :underline="false">
      <el-image
          :src="movieInfo.poster"
          class="movie-poster-img"/>
      <div class="movie-overlay movie-overlay-bg to-flex">
        <sn-row-has-two-col :left="20" :right="4">
          <p class="movie-name" slot="one-col">{{ movieInfo.movieName }}</p>
          <span
              v-if="Number(movieInfo.movieScore) !== 0 && movieInfo.movieScore"
              slot="two-col" class="movie-score vip">{{ Number(movieInfo.movieScore).toFixed(1) }}</span>
        </sn-row-has-two-col>
      </div>
    </el-link>
    <div class="has-border movie-description">
      <div class="want-see to-flex">
        <sn-text :number="movieInfo.expect"/>
        <sn-text text="人想看"/>
      </div>
      <div class="to-flex" v-if="showBuyButton">
        <el-button
            :disabled="true">
          预告片
        </el-button>
        <el-button :disabled="true" @click="getSale">
          预售
        </el-button>
      </div>
    </div>
    <sn-text
        v-if="isShowShowDate"
        :text="String(movieInfo.showDate).split(' ')[0]" class="be-on"/>
  </div>
</template>

<script>
export default {
  name: "WillOnMovieInfo",
  data() {
    return {}
  },
  methods: {
    getMovieDetail() {
      this.$store.commit(this.mutationsTypes.EXCHANGE_MOVIE_ID, this.movieInfo.movieId)
      this.$router.push({
        name: 'introduce',
      })
    },
    //打开预售
    getSale() {
      this.$router.push({
        name: 'cinema'
      })
    },
  },
  props: {
    movieInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    showBuyButton: {
      type: Boolean,
      default: true
    },
    isShowShowDate: {
      type: Boolean,
      default: true
    }
  },
}
</script>

<style scoped>
.be-on {
  text-align: center;
  width: 160px;
  margin-top: 5px;
  color: #999;
}


.movie-description {
  width: 160px;
}

.has-border {
  border: #EFEFEF solid 1px;
}

.movie-poster {
  background-color: #fcfcfc;
  width: 160px;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.movie-poster-img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.movie-overlay {
  background-color: #fcfcfc;
  width: 160px;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.movie-overlay-bg {
  background: url() repeat-x bottom;
}

.want-see {
  color: #FFB400;
  padding: 7px 10px;
}

.movie-score {
  position: absolute;
  bottom: 12px;
  left: 130px;
  font-size: 18px;
}

.movie-name {
  position: absolute;
  bottom: 0;
  color: #fff;
  width: 120px;
  margin-left: 5px;
  font-size: 15px;
}
</style>
